<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="../common/header.jsp"%>
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar">
        <div class="wu-toolbar-button">
            <%@include file="../common/menus.jsp"%>
        </div>
        <div class="wu-toolbar-search">
            <label>种类名称:</label><input id="search-name" class="wu-text" style="width:100px">
            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
</div>
<!-- 修改窗口 -->
<div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:550px; padding:10px;">
	<form id="edit-form" method="post">
        <input type="hidden" name="id" id="edit-id">
        <table>
          
            <tr>
                <td width="80" align="right">商品种类名称:</td>
                <td><input type="text" id="edit-name" name="name"  onkeyup="CountWords(this,'show')" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品种类名称'" />&nbsp;&nbsp;字数：<span id="show">0</span><span>/<font color="red">6</font></span></td>
            </tr>
            <tr>
                <td width="80" align="right">商品种类路径:</td>
                <td><input type="text" name="href" id="edit-href" class="wu-text easyui-validatebox" data-options="required:true, missingMessage:'请填写商品种类路径'" /></td>
            </tr>
          
        </table>
    </form>
</div>
<%@include file="../common/footer.jsp"%>

<!-- End of easyui-dialog -->
<script type="text/javascript">
	
//商品名称计数
var charCount;
function CountWords(obj, show_id){ 
 
 var fullStr = obj.value; 
 charCount = fullStr.length;

 var rExp = /[^A-Za-z0-9]/gi; 
 var spacesStr = fullStr.replace(rExp, ' '); 
 var cleanedStr = spacesStr + ' '; 
 do{ 
  var old_str = cleanedStr; 
  cleanedStrcleanedStr = cleanedStr.replace(' ', ' '); 
 }while( old_str != cleanedStr ); 
  var splitString = cleanedStr.split(' '); 
  document.getElementById(show_id).innerHTML=charCount; 
} 
	
	
	
/**
* Name 修改记录
*/
function edit(){
	var nameCount = document.getElementById('show').innerHTML
	if(nameCount>6)
	{
		$.messager.alert('信息提示',"商品种类名称字数不能大于6个！",'warning');
		return;
	}
	
	var validate = $("#edit-form").form("validate");
	if(!validate){
		$.messager.alert("消息提醒","请检查你输入的数据!","warning");
		return;
	}
	var data = $("#edit-form").serialize();
	$.ajax({
		url:'edit_category',
		dataType:'json',
		type:'post',
		data:data,
		success:function(data){
			$("#data-datagrid").datagrid('clearSelections');
			if(data.type == 'success'){
				$.messager.alert('信息提示','修改成功！','info');
				$('#edit-dialog').dialog('close');
				$('#data-datagrid').datagrid('reload');
			}else{
				$.messager.alert('信息提示',data.msg,'warning');
			}
		}
	});
}

/**
* 打开修改窗口
*/
function openEdit(){
	//$('#edit-form').form('clear');
	var item = $('#data-datagrid').datagrid('getSelections');
	if(item == null || item.length == 0){
		$.messager.alert('信息提示','请选择要修改的数据！','info');
		return;
	}
	if(item.length > 1){
		$.messager.alert('信息提示','请选择一条数据进行修改！','info');
		return;
	}
	item = item[0];
	$('#edit-dialog').dialog({
		closed: false,
		modal:true,
        title: "修改用户信息",
        buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: edit
        }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
                $('#edit-dialog').dialog('close');                    
            }
        }],
        onBeforeOpen:function(){
        	$("#edit-id").val(item.id);
        	$("#edit-name").val(item.name);
        	$("#edit-href").val(item.href);
        }
    });
}	
	
	

	
	
	
	//搜索按钮监听
	$("#search-btn").click(function(){
		
		var option = {name:$("#search-name").val()};
		
		$('#data-datagrid').datagrid('reload',option);
	});
	
	

	
	/** 
	* 载入数据
	*/
	$('#data-datagrid').datagrid({
		url:'category',
		rownumbers:true,
		singleSelect:false,
		pageSize:20,           
		pagination:true,
		multiSort:true,
		fitColumns:true,
		idField:'id',
		fit:true,
		columns:[[
			{ field:'chk',checkbox:true},
			{ field:'name',title:'种类名称',width:100,align:'center'},
			{ field:'href',title:'商品种类路径',width:100,align:'center'},
		]]
	});
</script>